<script setup lang="ts">
import { UserIdAuthData, getUserIdAuthData } from "@/api/user";
import { PlusDescriptions, type PlusColumn } from "plus-pro-components";
import "plus-pro-components/es/components/descriptions/style/css";
import { ref } from "vue";
const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
});
const authData = ref<UserIdAuthData>();
const authDescColumns: PlusColumn[] = [
  {
    label: "姓名",
    width: 120,
    prop: "name",
    valueType: "copy"
  },
  {
    label: "身份证号码",
    width: 120,
    prop: "card",
    valueType: "copy"
  },
  {
    label: "身份证正面",
    width: 120,
    prop: "zmimage"
  },
  {
    label: "身份证反面",
    width: 120,
    prop: "bmimage"
  },
  {
    label: "状态",
    width: 120,
    prop: "status",
    valueType: "text",
    formatter: row => {
      return row === "1" ? "已认证" : "未认证";
    }
  }
];

const loadIdAuthData = async () => {
  if (authData.value) return;
  try {
    console.log(2132134221211313);
    const res = await getUserIdAuthData(props.userId);
    authData.value = res.data;
    console.log(authData.value, "authData");
  } catch (error) {
    console.log(error, "error");
  }
};
loadIdAuthData();
</script>

<template>
  <div v-if="authData" class="flex flex-col">
    <PlusDescriptions :columns="authDescColumns" :column="2" :data="authData">
      <template #plus-desc-zmimage="{ value }">
        <el-image
          :src="value"
          style="width: 140px"
          :preview-src-list="[value]"
        />
      </template>
      <template #plus-desc-bmimage="{ value }">
        <el-image
          :src="value"
          style="width: 140px"
          :preview-src-list="[value]"
        />
      </template>
    </PlusDescriptions>
  </div>
</template>

<style scoped></style>
